<template>
  <el-card>
    <el-table :data="permissionList" border style="width: 100%"  row-key="id" :expand-row-keys="rowKey" empty-text="暂无数据" >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="code" label="权限值"></el-table-column>
      <el-table-column prop="toCode" label="跳转权限值"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="row.type == 2" @click="addHandler(row)" ></el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="row.id == 1" @click="editHandler(row)" ></el-button>
          <el-popconfirm title="这是一段内容确定删除吗" class="ml-10" @onConfirm="removeHandler(row)" >
            <el-button type="danger"  size="mini" icon="el-icon-delete" slot="reference" :disabled="row.id == 1" ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加菜单" :visible.sync="dialogVisible" top="0" >
      <el-form :model="menuForm" label-width="120px">
        <el-form-item label="名称">
          <el-input style="width: 600px;" size="small" v-model="menuForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="功能权限值">
          <el-input style="width: 600px;" size="small" v-model="menuForm.code" ></el-input>
        </el-form-item>
        <el-form-item label="跳转功能权限值" v-if="menuForm.tocodevisible" >
          <el-input style="width: 600px;" size="small" v-model="menuForm.tocode" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandler">取 消</el-button>
        <el-button type="primary" @click="saveHandler">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import permissionApi from '@/api/permission'
import { Message } from 'element-ui';
import Lodash from 'lodash'
export default {
  name: "Menu",
  data() {
    return {
      permissionList: [],
      dialogVisible: false,
      menuForm: {
        name: '',
        code: '',
        level: 0,
        pid: '',
        type: 1,
        tocode: '',
        tocodevisible: false
      }
    };
  },
  methods: {
    async getPermissionList() {
      try {
        let result = await permissionApi.permission();
        this.permissionList = result.children
      } catch (error) {
        console.error(error)
      }
    },
    addHandler(row) {
      this.menuForm = {
        name: '',
        code: '',
        level: 0,
        pid: '',
        type: 1,
        tocode: '',
        tocodevisible: false
      }
      this.dialogVisible = true
      this.menuForm.level = row.level + 1
      this.menuForm.pid = row.id
      if(row.level == 3) {
        this.menuForm.tocodevisible = true
        this.menuForm.type = 2
      } else {
        this.menuForm.type = 1
      }
    },
    editHandler(row) {
      this.dialogVisible = true
      this.$set(row, 'tocodevisible', false)
      this.menuForm = Lodash.cloneDeep(row)
      if(row.type == 2) {
        this.menuForm.tocodevisible = true
      }
    },
    cancelHandler() {
      this.dialogVisible = false
    },
    async saveHandler() {
      this.dialogVisible = false
      try {
        if(this.menuForm.id) {
          await permissionApi.update(this.menuForm)
          Message.success('修改成功')
        } else {
          console.log(this.menuForm)
          await permissionApi.save(this.menuForm)
          Message.success('添加成功')
        }
        this.getPermissionList()
      } catch (error) {
        console.log(error)
        if(this.menuForm.id) {
          Message.error('修改失败')
        } else {
          Message.error('添加失败')
        }
      }
    },
    async removeHandler(row) {
      console.log(row)
      try {
        await permissionApi.remove(row.id)
        Message.success('删除成功')
        this.getPermissionList();
      } catch (error) {
        console.error(error)
        Message.error('删除失败')
      }
    }
  },
  computed: {
    rowKey() {
      return this.permissionList.map(item => item.id)
    }
  },
  mounted() {
    this.getPermissionList();
  }
};
</script>

<style>
</style>